(function () {
    //封装一个方法,叫做render,复用这个函数可以将数据 转变成结构 并且添加到页面上
    let newData = [];//这个数组是用来和原来的数据进行合并,实现追加的效果
    let pageid = 1;//产品的id
    function render(data = []) {
        newData = [...newData, ...data]
        console.log(newData);
        let html = "" //这个变量用于保存循环创建出来的结构字符串

        newData.forEach(item => {
            let regExp = /(?<=imgurl=)[^'"]*/;
            console.log(regExp)
            let r = item.productImg2.match(regExp);
            console.log(r)
            console.log(item)
            html += `<li>
            <a href="../pages/indexDetail.html?productid=${item.productId}" class="clearfix">
                <div class="img fl">
                    <img src=${r[0]} height="100" alt="">
                </div>
                <div class="infoR">
                    <div class="title">
                        <h4>${item.productName}
                            <span>${item.productPinkage}</span>
                        </h4>
                    </div>
                    <div class="other">
                        <span class="mall fl">${item.productFrom}     |${item.productTime}</span>
                        <em class="fr">
                            <span> ${item.productComCount}</span>
                        </em>
                    </div>
                </div>
            </a>
        </li>`
        })


        $("#container #uu").html(html)
    }

    //封装一个叫做lazyLoad的方法,这个方法需要接受2个桉树
    //1.一个函数,当懒加载达到阈值之后,就会回调传入的函数
    //2.阈值 达到传入的阈值的时候 对函数进行回调

    function lazyLoad(fn, threshold = 5) {
        //默认的阈值是50
        //监听浏览器滚动条滚动事件
        let flag = true;//默认开关是打开的
        window.onscroll = function () {
            let clientHeight = document.documentElement.clientHeight; //获取可视区高度
            let scrollTop = document.documentElement.scrollTop;
            let scrollHeight = document.documentElement.scrollHeight;
            //内容距离可视区底部的距离
            let distance = scrollHeight - (clientHeight + scrollTop)

            if (distance < threshold) {
                if (flag) { //一旦进入 将开关关闭 防止多次触发
                    flag = false;
                    // console.log('快要到底部了');
                    fn()//回调传入的函数
                }
            } else {//滚动的距离已经大于了阈值 将开关打开 用户可能滚动条往上滚了
                flag = true;

            }
        }
    }

    lazyLoad(function () {
        pageid++ //每次被懒加载回调的时候 让id自加 请求不同的数据
        if (pageid > 14) { //当id大于14的时候 停止发送请求
            return
        }
        $.ajax({
            url: "http://chst.vip:1234/api/getmoneyctrl",
            data: {
                pageid
            }
        })
            .then(res => {
                console.log(res);
                render(res.result)
                //循环数据 创建结构
            })
    }, 50)

    $.ajax({
        url: "http://chst.vip:1234/api/getmoneyctrl",
        data: {
            pageid: 0
        }
    })
        .then(res => {
            console.log(res);
            render(res.result)
            //循环数据 创建结构
        })
        .catch(err => {
            console.log(err)
        })
    //事件委托注册事件
    let uu = document.querySelector('#container ul')
    uu.onclick = function (e) {
        if (e.target.localName === 'li') {
            let _this = e.target;
            console.log(_this)

            //获取当前li标签的productid

            let id = _this.getAttribute('productid')

            location.href = "../pages/indexDetail.html?productid=" + id
        }
    }
})()


